<template>  
    <div class="login-container">  
        <div class="login-background"></div> <!-- 背景层 -->  
        <h2>欢迎来到中国风音乐平台</h2>  
        <h2>用户注册</h2>  
        <el-form :model="registerForm" ref="registerForm" label-width="80px">  
            <el-form-item label="用户名" prop="user_name" :label-width="formLabelWidth">  
                <el-input v-model="registerForm.user_name" placeholder="请输入账号" style="width: 400px;" clearable></el-input>  
            </el-form-item>  

            <el-form-item label="上传头像" :label-width="formLabelWidth">  
                <el-upload  
                    ref="avatarUploader" 
                    class="avatar-uploader"  
                    action="http://localhost:8080/v1/user/upload"  
                    :show-file-list="false"  
                    :on-success="handleAvatarSuccess"  
                    :before-upload="beforeAvatarUpload"  
                >  
                <div class="avatar-wrapper"> 
                    <el-avatar :src="'http://localhost:8080/images/upload/' + registerForm.profile_picture" style="width: 80px; height: 80px;"></el-avatar>  
                    <el-button icon="Close" type="primary" plain @click="clearImage"class="avatar-clear"></el-button>
                </div>
                </el-upload>  
            </el-form-item>  

            <!-- 密码输入框 -->  
            <el-form-item label="密码" prop="password" :label-width="formLabelWidth">  
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码" style="width: 400px;" clearable></el-input>  
            </el-form-item>  

            <el-form-item label="确认密码" prop="confirmPassword" :label-width="formLabelWidth">  
                <el-input type="password" v-model="registerForm.confirmPassword" placeholder="确认密码" style="width: 400px;" clearable></el-input>  
            </el-form-item>  

            <!-- 注册按钮 -->  
            <el-form-item class="button-group">  
                <el-button @click="submit" class="btn">注册</el-button>  
                <el-button  @click="navigateTo('/')" class="full-width">返回登录</el-button>  
                <p v-if="errorMessage" class="error">{{ errorMessage }}</p>  
            </el-form-item>  
            <h5>注册意味着您已同意所有用户条款。</h5>  
        </el-form>  
    </div>  
</template>  

<script>  
import axios from 'axios';  
import { ElMessage } from 'element-plus';  
import router from '../router/index.js';  
import { Plus } from '@element-plus/icons-vue';  

export default {  
    data() {  
        return {  
            registerForm: {  
                user_name: '',  // 账号  
                password: '',  // 密码  
                confirmPassword: "", //确认密码  
                profile_picture: "", // 头像 URL  
            },  
            errorMessage: '',  // 错误信息  
            showFileList: false, // 控制文件列表显示的变量  
        };  
    },  
    methods: {  
        async submit() {  
            if (this.registerForm.password !== this.registerForm.confirmPassword) {  
                ElMessage.error("两次输入的密码不一致");  
                return;  
            }  
            if (!this.registerForm.user_name) {  
                ElMessage.error("用户名不能为空");  
                return;  
            }  
            if (this.registerForm.password.length < 4) {  
                ElMessage.error("密码长度不能少于4位");  
                return;  
            }  

            try {  
                const response = await axios.post("http://localhost:8080/v1/userRegister", this.registerForm);  
                if (response.data === "success") {  
                    ElMessage.success("注册成功，请登录");  
                    this.$router.push("/");  
                } else {  
                    // 直接显示后端返回的错误信息  
                    ElMessage.error(response.data);  
                }  
            } catch (error) {  
                if (error.response) {  
                    if (error.response.status === 400) {  
                        // 如果后端返回400错误，显示具体的错误信息  
                        ElMessage.error(error.response.data);  
                    }  
                }  
            }  
        },  
        clearImage() {
       this.registerForm.profile_picture = ''; // 清空图片地址
        // 清除 el-upload 组件中的文件列表
        this.$refs.avatarUploader.clearFiles();
        this.showFileList = false; // 手动设置 show-file-list 为 false
       },
        navigateTo(route) {  
            this.$router.push(route);  
        },  

        handleAvatarSuccess(response) {  
            this.registerForm.profile_picture = response;  
        },  
        
        //检查文件大小  
        beforeAvatarUpload(file) {  
            const isImage = file.type.startsWith('image/');  
            if (!isImage) {  
                ElMessage.error('请选择图片文件!');  
            }  
            const isLt2M = file.size / 1024 / 1024 < 2;  
            if (!isLt2M) {  
                ElMessage.error('上传头像图片大小不能超过 2MB!');  
            }  
            return isImage && isLt2M;  
        },  
    },  
    components: {  
        Plus  
    },  
};  
</script>  

<style scoped>  
.login-background {  
    position: absolute; /* 绝对定位 */  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background-image: url('/images/bg1.jpg'); /* 确保路径正确 */  
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
    z-index: -1; /* 确保背景在内容后面 */  
}  
.login-container {  
    width: 500px;  
    margin: 150px auto;  
    padding: 20px;  
    background: #f9f4e8;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(0, 0,0, 0.1);  
    font-family: 'KaiTi', serif; /* 使用中国风字体 */  
    text-align: center;  
}  

h2 {  
    font-size: 24px;  
    font-weight: bold;  
    color: #4b3f33;  
    letter-spacing: 2px;  
    margin-bottom: 30px;  
}  
.form-item {  
    font-size: 22px; /* 增大标签字体的大小 */  
    margin-bottom: 20px;  
}  
.el-form-item {  
    margin-bottom: 20px;  
    font-size: 20px; /* 增大标签文字 */  
}  

.el-button {  
    font-size: 16px;  
    font-family: 'KaiTi', serif; /* 中国风字体 */  
    margin-top: 10px; /* 添加上边距，使按钮有更好的间距 */  
}  

.button-group {  
    display: flex;  
    flex-direction: column; /* 垂直排列按钮 */  
    align-items: flex-start; /* 将按钮对齐到左侧 */  
    justify-content: center; /* 水平居中 */  
    width: auto; /* 设置为自动宽度 */  
    margin-left: calc(50% - 160px); /* 向左移动按钮 - 102px 是一个大概的值，实际值可以根据按钮的宽度调整 */  
}  

.error {  
    color: red;  
    margin-top: 10px;  
    font-size: 14px;  
}  

h5 {  
    margin-top: 20px;  
    font-size: 16px;  
}  
.avatar-wrapper {
  position: relative;
  display: inline-block;
}

.avatar-clear {
  position: absolute;
  top: -20px; /* 向上移动，避免被头像遮挡 */
  right: -30px; /* 向右移动，避免被头像遮挡 */
  z-index: 10;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  width: 30px; /* 设置按钮宽度 */
  height: 30px; /* 设置按钮高度 */
  transition: all 0.3s;
  transform: scale(0.8); /* 缩小图标 */
}

.avatar-clear:hover {
  transform: scale(1);
}

/* 调整图标大小 */
.el-button .el-icon-close {
  width: 14px;
  height: 14px;
}

</style>
